<template>
  <p-card>
    <p-page-header
            style="border: 1px solid rgb(235, 237, 240)"
            title="生成入库检送检任务（半成品）"
    >
      <template slot="extra">
        <!--<p-popconfirm
                title="确定要提交吗？"
                ok-text="确定"
                cancel-text="取消"
                @confirm=""
                @cancel="cancel"
        >
          <p-button type="primary">提交</p-button>
        </p-popconfirm>-->

        <p-button @click="backToIndex">取消</p-button>
      </template>
    </p-page-header>
    <h4 class="title">基础信息</h4>

    <p-form-model
      ref="baseInfoData"
      :model="baseInfoData"
      :rules="rules"
      :label-col="labelCol"
      :wrapper-col="wrapperCol"
    >
      <p-row :gutter="24">
        <p-col :span="8">
          <p-form-model-item ref="inspectBillno" label="送检单号" prop="inspectBillno">
            <p-input
                    readOnly
              v-model="baseInfoData.inspectBillno"
              @blur="
          () => {
            $refs.inspectBillno.onFieldBlur();
          }
        "
            />
          </p-form-model-item>
        </p-col>
        <p-col :span="8">
          <p-form-model-item ref="sendInspecter" label="送检人" prop="sendInspecter">
            <p-input
                    readOnly
              v-model="baseInfoData.sendInspecter"
              @blur="
          () => {
            $refs.sendInspecter.onFieldBlur();
          }
        "
            />
          </p-form-model-item>
        </p-col>
        <p-col :span="8">
          <p-form-model-item ref="sendInspectTime" label="送检时间" prop="sendInspectTime">
            <p-input
                    readOnly
              v-model="baseInfoData.sendInspectTime"
              @blur="
          () => {
            $refs.sendInspectTime.onFieldBlur();
          }
        "
            />
          </p-form-model-item>
        </p-col>
        <p-col :span="8">
          <p-form-model-item ref="waitInspectNumber" label="待检数量" prop="waitInspectNumber">
            <p-input
                    type="number"
                    readOnly
              v-model="baseInfoData.waitInspectNumber"
              @blur="
          () => {
            $refs.waitInspectNumber.onFieldBlur();
          }
        "
            />
          </p-form-model-item>
        </p-col>

        <p-col :span="8">
          <p-form-model-item ref="controlsType" label="管控方式" prop="controlsType">
            <p-select v-model="baseInfoData.controlsType" placeholder="please select your zone" @change="controlsTypeChange">
              <p-select-option value=1 >SN</p-select-option>
              <p-select-option value=2 >PN</p-select-option>
            </p-select>
          </p-form-model-item>
        </p-col>
      </p-row>
    </p-form-model>
    <h4 class="title">送检范围条件</h4>


    <p-form-model
      ref="inspectionConditions"
      :model="baseInfoData"
      :rules="rules"
      :label-col="labelCol"
      :wrapper-col="wrapperCol"
    >
      <p-row :gutter="24">
        <p-col :span="8">
          <p-form-model-item ref="mcode" label="产品编码" prop="mcode">
            <p-select
                    show-search
                    :filter-option="mcodeFilterOption"
                    v-model="baseInfoData.mid"
                    placeholder="请选择产品"
                    @change="productionSelectChange"

            >
            <p-select-option
                v-for="(item) in productionList"
                :key="item.mid"
                :value="item.mid"
              >{{item.mcode}}</p-select-option>


            </p-select>
          </p-form-model-item>
        </p-col>
        <p-col :span="8">
          <p-form-model-item ref="mname" label="产品名称" prop="mname">
            <p-input
                    readOnly
              v-model="baseInfoData.mname"
              @blur="
          () => {
            $refs.mname.onFieldBlur();
          }
        "
            />
          </p-form-model-item>
        </p-col>
        <p-col :span="8">
          <p-form-model-item ref="processbillnoValues" label="工序工单" prop="processbillnoValues">
            <p-select  mode="multiple" v-model="processbillnoValues" placeholder="请选择工序工单" @change="processbillnoSelectChange" >
              <p-select-option
                v-for="(item,index) in processbillnoList"
                :key="index"
                :value="item.processbillno"
              >{{item.processbillno}}</p-select-option>
            </p-select>
          </p-form-model-item>
        </p-col>
        <p-col :span="8">
          <p-form-model-item ref="productionno" label="生产工单" prop="productionno">
            <p-select mode="multiple" v-model="productionnoValues" placeholder="请选择生产工单" @change="productionnoSelectChange">
              <p-select-option
                v-for="(item,index) in productionnoList"
                :key="index"
                :value="item.productionno"
              >{{item.productionno}}</p-select-option>
            </p-select>
          </p-form-model-item>
        </p-col>
        <p-col :span="8" v-if="baseInfoData.controlsType==2">
          <p-form-model-item ref="pnSendNumber" label="PN实际送检数量" prop="pnSendNumber">
            <p-input
                    type="number"
              v-model="baseInfoData.pnSendNumber"
              @blur="
          () => {
            $refs.pnSendNumber.onFieldBlur();
          }
        "
            />
          </p-form-model-item>
        </p-col>
        <p-col :span="8">
          <p-form-model-item ref="screeningSn" label="SN/PN" prop="screeningSn">
            <p-select mode="multiple" v-model="snpnValues" placeholder="请选择SN/PN" @change="snpnSelectChange">
              <p-select-option
                v-for="(item,index) in snpnList"
                :key="index"
                :value="item.value"
              >{{item.value}}</p-select-option>
            </p-select>
          </p-form-model-item>
        </p-col>
        <p-col :span="8">
          <p-form-model-item ref="inbankIndex" label="入库库位" prop="inbankIndex">
            <p-select v-model="baseInfoData.inbankIndex" placeholder="please select your zone" @change="inbankIndexSelectChange">
              <p-select-option
                v-for="(item,index) in inbankIndexOptions"
                :key="index"
                :value="item.inbankIndex"
              >{{item.inbankIndex}}</p-select-option>
            </p-select>
          </p-form-model-item>
        </p-col>
        <p-col :span="8">
          <p-form-model-item ref="inbankBank" label="入库仓库" prop="inbankBank">
            <p-select v-model="baseInfoData.inbankBank" placeholder="please select your zone">
              <p-select-option
                v-for="(item,index) in inbankBankOptions"
                :key="index"
                :value="item.inbankBank"
              >{{item.inbankBank}}</p-select-option>
            </p-select>
          </p-form-model-item>
        </p-col>
      </p-row>
    </p-form-model>

    <h4 class="title">送检产品明细</h4>
    <p-alert v-if="tipsState==1"  message="无可选的送检产品明细列表" type="warning" show-icon />
    <p-alert v-if="tipsState==2"  message="请勾选送检产品明细" type="info" show-icon />
    <div v-if="tipsState==3" class="ant-alert ant-alert-success"  style="margin-bottom: 16px;">
      <p-icon type="check-circle" style="background-color: #33cc66;border-radius: 60px;color:white;font-size:20px" />
      <i class="anticon anticon-info-circle ant-alert-icon"></i> 已选择
      <a style="font-weight: 600">{{ selectedRowKeys.length }}</a>项
      <a style="margin-left: 24px" @click="clearSelectRow">清空</a>
    </div>

    <p-table
      :columns="inspectionProductsColumns"
      :data-source="inspectionProductsnData"
      class="components-table-demo-nested"
      bordered
      style="margin-top:10px;"
      :rowSelection="{
        selectedRowKeys: selectedRowKeys,
        onChange: onSelectChange,
        getCheckboxProps:getCheckboxProps
      }"
      :customRow="setRow"
    >
      <template slot="qty" slot-scope="text,record">
       <div v-if="baseInfoData.controlsType==1">1</div>
       <div v-else>{{text}}</div>
      </template>

    </p-table>


    <p-popconfirm
            style="margin-left: 16px;"
            title="确定要提交吗？"
            ok-text="确定"
            cancel-text="取消"
            @confirm="submitData"
            @cancel="cancel"
    >
      <p-button type="primary" >提交</p-button>
    </p-popconfirm>
  </p-card>
</template>

<script>
// import { JeecgListMixin } from "@/mixins/JeecgListMixin";
import { api } from "@/api/manage";
import JSuperQuery from "@/components/jeecg/JSuperQuery.vue";
import { filterObj } from "@/utils/util";
import Vue from "vue";
import {getAction,putAction,postAction} from "../../../api/manage";

export default {
  name: "MesQcInfoCHalfList",
  // mixins: [JeecgListMixin],
  props:['mqVisible','mqLoad','mqData'],
  data() {
    return {
      labelCol: { span: 7 },
      wrapperCol: { span: 16 },
      selectedRowKeys: [],
      selectedRows: [],
      tipsState:1,

      //产品list
      productionList:[],
      productionMap:[],

      //工序工单list
      processbillnoList:[],
      processbillnoMap:[],

      //生产工单list
      productionnoList:[],
      productionnoMap:[],

      //SN、PN list
      snpnList:[],
      snpnMap:[],

      processbillnoValues:[],
      productionnoValues:[],
      snpnValues:[],
      rules: {
        inspectBillno: [
          {
            required: true,
            message: "Please input Activity name",
            trigger: "blur",
          },
        ],
        sendInspecter: [
          {
            required: true,
            message: "Please input Activity name",
            trigger: "blur",
          },
        ],
        sendInspectTime: [
          {
            required: true,
            message: "Please input Activity name",
            trigger: "blur",
          },
        ],
        waitInspectNumber: [
          {
            required: true,
            message: "Please input Activity name",
            trigger: "blur",
          },
        ],
        controlsType: [
          {
            required: true,
            message: "Please input Activity name",
            trigger: "blur",
          },
        ],

        mname: [
          {
            required: true,
            message: "Please input Activity name",
            trigger: "blur",
          },
        ],


        screeningSn: [
          {
            required: true,
            message: "Please input Activity name",
            trigger: "blur",
          },
        ],
        inbankIndex: [
          {
            required: true,
            message: "Please input Activity name",
            trigger: "blur",
          },
        ],
        inbankBank: [
          {
            required: true,
            message: "Please input Activity name",
            trigger: "blur",
          },
        ],
      },


      modal2Visible: false,
      baseInfoData: {
        //基础信息
        inspectBillno: "001", //送检单号
        sendInspecter: "", //送检人
        sendInspectTime: "", //送检时间
        waitInspectNumber: "", //待检数量
        controlsType: 1, //管控方式
        mid: {},
        mcode: 1, //产品编码
        mname: "", //产品名称
        processbillno: 1, //工序工单
        productionno: 1, //生产工单
        pnSendNumber: 0, //PN实际送检数量
        screeningSn: 1, //SN/PN
        inbankIndex: 1, //入库库位
        inbankBank: 1, //入库仓库
      },
      controlsTypeOptions: [
        //入库仓库选项
        {
          name: "SN",
          value: 1,
        },
        {
          name: "PN",
          value: 2,
        },
      ],

      processbillnoOptions: [

      ],
      productionnoOptions: [

      ],
      screeningSnOptions: [

      ],
      inbankIndexOptions: [

      ],
      inbankBankOptions: [

      ],
      inspectionProductsColumns: [
        { title: "序号",
          dataIndex: "",
          key: "rowIndex",
          width: 60,
          align: "center",
          customRender: function (t, r, index) {
            return parseInt(index) + 1;
          }, },
        { title: "线体", dataIndex: "linename", key: "linename" },
        {
          title: "生产工单",
          dataIndex: "productionno",
          key: "productionno",
        },
        { title: "工序工单", dataIndex: "processbillno", key: "processbillno" },
        { title: "产品编码", dataIndex: "mcode", key: "mcode" },
        { title: "产品名称", dataIndex: "mname", key: "mname" },
        { title: "栈板号/容器码", dataIndex: "palletNo", key: "palletNo" },
        { title: "SN/PN", dataIndex: "snpn", key: "snpn" },
        { title: "数量", dataIndex: "qty", key: "qty",scopedSlots: {customRender: "qty"} },
        { title: "状态", dataIndex: "status", key: "status",
          customRender: (text) => {
            if (!text) {
              return "";
            } else {
              return text==1?'未检':'已检';
            }
          },
        },
      ],
      inspectionProductsnData: [

      ],
      firstInspectionProductsnData:[],
    };
  },
  computed: {
    // checkBox属性设置
    getCheckboxProps(record) {
      return (record) => ({
        props: {
          // defaultChecked: record.key === this.modal2InspectionData[0].key,
        },
      });
    },
  },


  created() {this.mqListener();},

  methods: {
    mqListener(){
      console.log(this.mqVisible)
      console.log(this.mqLoad)
      console.log(this.mqData)
      this.initData(this.mqData);
    },
    backToIndex(){
      let mqData = this.mqData;
      this.$emit('update:mqVisible', 1);
      this.$emit('update:mqLoad', false);
      mqData.id = 0;
      this.$emit('update:mqData', mqData);
    },
    setRow(record) {
      return {
        on: {
          click: () => {
            let rowKeys = this.selectedRowKeys;
            if (rowKeys.length > 0 && rowKeys.includes(record.key)) {
              rowKeys.splice(rowKeys.indexOf(record.key), 1);
            } else {
              rowKeys.push(record.key);
            }
            this.selectedRowKeys = rowKeys;
            console.log(this.selectedRowKeys);
          },
        },
      };
    },
    onSelectChange(selectedRowKeys) {
      console.log("selectedRowKeys changed: ", selectedRowKeys);
      this.selectedRowKeys = selectedRowKeys;
      this.setTipsState();
      this.setPnFactQty(selectedRowKeys);
    },

    //设置pn实际送检数量
    setPnFactQty(selectedRowKeys){
      if(this.baseInfoData.controlsType==2){
        let map = this.listToMap(this.inspectionProductsnData,'key');
        let result = 0;
        selectedRowKeys.forEach(item=>{
          if(map[item]){
            result+=map[item].qty;
          }
        })
        this.baseInfoData.pnSendNumber = result;
      }

    },

    //设置提示状态
    setTipsState(){
      if(this.inspectionProductsnData.length==0){
        this.tipsState=1;
      }else{
        if(this.selectedRowKeys.length==0){
          this.tipsState=2;
        }else{
          this.tipsState=3;
        }
      }
    },

    /**
     * 数据初始化
     */
    initData(query){

      if(!query.id){
        this.$message.warning("请通过来入库检验清单选择单号进入！");
      }else{
        let id = query.id;
          getAction('/mes-quality/mesQcIntoWarehouseInspectTask/selectById/'+id).then(res=>{
            if(res.success){
              let data = res.data;
              this.baseInfoData = data;
              if(!this.baseInfoData.processbillno||this.baseInfoData.processbillno===""){
                this.processbillnoValues = [];
              }else{
                this.processbillnoValues = this.baseInfoData.processbillno.split(",");
              }

              this.initInspectionProductsnData();
              this.initInbankIndexOptions();
              this.setTipsState();
            }else{
              this.$message.warning("后台获取单据信息报错");
            }
          })
      }
    },

    //清空已勾选的检验项目明细
    clearSelectRow(){
      this.selectedRowKeys= [];
      this.selectedRows= [];
      this.setTipsState();
      if(this.baseInfoData.controlsType==2){
        this.baseInfoData.pnSendNumber=0;
      }
    },

    //加载入库库位及其对应仓库
    initInbankIndexOptions(){
      let data = [
        {inbankIndex:"入库库位1",inbankBankOptions:[{inbankBank:"仓库1",},{inbankBank:"仓库2",}]},
        {inbankIndex:"入库库位2",inbankBankOptions:[{inbankBank:"仓库3",},{inbankBank:"仓库4",}]},
        {inbankIndex:"入库库位3",inbankBankOptions:[{inbankBank:"仓库5",},{inbankBank:"仓库6",}]},
      ];
      this.inbankIndexOptions = data;
    },
    //加载送检产品明细列表，并且从中取出产品编码下拉框的数据集
    initInspectionProductsnData(){
        let  inspectionProductsnData  = [
        {
          linename: "A0001",
          productionno: "SCGD111",
          processbillno: "GXGD111",
          mid:1001,
          mcode: "M1001",
          mname: "产品1001",
          palletNo: "XXX",
          snpn: "x1001",
          qty: 88,
          status: 1,
        },
        {
          linename: "A0001",
          productionno: "SCGD222",
          processbillno: "GXGD222",
          mid:1001,
          mcode: "M1001",
          mname: "产品1001",
          palletNo: "XXX",
          snpn: "x1002",
          qty: 73,
          status: 1,
        },

          {
            linename: "A0002",
            productionno: "SCGD333",
            processbillno: "GXGD333",
            mid:1002,
            mcode: "M1002",
            mname: "产品1002",
            palletNo: "XXX",
            snpn: "x1003",
            qty: 61,
            status: 1,
          },
          {
            linename: "A0002",
            productionno: "SCGD444",
            processbillno: "GXGD444",
            mid:1002,
            mcode: "M1002",
            mname: "产品1002",
            palletNo: "XXX",
            snpn: "x1004",
            qty: 68,
            status: 1,
          },

          {
            linename: "A0001",
            productionno: "SCGD555",
            processbillno: "GXGD555",
            mid:1001,
            mcode: "M1001",
            mname: "产品1001",
            palletNo: "XXX",
            snpn: "x1005",
            qty: 23,
            status: 1,
          },
          {
            linename: "A0002",
            productionno: "SCGD666",
            processbillno: "GXGD666",
            mid:1002,
            mcode: "M1002",
            mname: "产品1002",
            palletNo: "XXX",
            snpn: "x1006",
            qty: 61,
            status: 1,
          },
      ];
      //循环设置key   一定要key！用于后续联动数据
      for(let i=0;i<inspectionProductsnData.length;i++){
        inspectionProductsnData[i].key = i+1;
      }
        this.inspectionProductsnData = inspectionProductsnData;
       this.firstInspectionProductsnData = inspectionProductsnData;

        //TODO 产品直接先假数据写死，后续可能会通过上面的假明细做groupBy
        let productionList = [
          { mid:1001,
            mcode: "M1001",
            mname: "产品1001",},
          { mid:1002,
            mcode: "M1002",
            mname: "产品1002",},
        ];

        this.productionList = productionList;
        this.productionMap = this.listToMap(productionList,'mid');

    },

    //封装listToMap
    listToMap(list,name){
      let map = {};
      for(let i in list){
        map[list[i][name]] = list[i];
      }
      return map;
    },
    /**
     * 产品下拉框控件方法
     * @param input
     * @param option
     * @returns {boolean}
     */
    mcodeFilterOption(input, option){
      return (
              option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
      );
    },
    /**
     * 产品下拉框change事件
     */
    productionSelectChange(value){
      let production = this.productionMap[value];
      this.baseInfoData.mid = production.mid;
      this.baseInfoData.mcode = production.mcode;
      this.baseInfoData.mname = production.mname;


      //清空已选择的工序工单,生产工单
      this.processbillnoValues = [];
      this.processbillnoList  = [];
      this.productionnoValues = [];
      this.productionnoList = [];
      this.snpnValues = [];
      this.snpnList = [];



      //TODO 假数据 加载工序工单

      //this.initProcessbillnoList();
      let processbillnoList = [
        {processbillno:"GXGD111"},
        {processbillno:"GXGD222"},
        {processbillno:"GXGD333"},
        {processbillno:"GXGD444"},
        {processbillno:"GXGD555"},
        {processbillno:"GXGD666"},
      ];
      this.processbillnoList = processbillnoList;

      let productionnoList = [
        {productionno:"SCGD111"},
        {productionno:"SCGD222"},
        {productionno:"SCGD333"},
        {productionno:"SCGD444"},
        {productionno:"SCGD555"},
        {productionno:"SCGD666"},
      ];
      this.productionnoList = productionnoList;

      let snpnList = [
        {value:"x1001"},
        {value:"x1002"},
        {value:"x1003"},
        {value:"x1004"},
        {value:"x1005"},
        {value:"x1006"},
      ];

      this.snpnList = snpnList;


      this.resetSendProductDetail();
    },
    /**
     * 管控方式下拉框change事件
     */
    controlsTypeChange(value){
      this.setPnFactQty(this.selectedRowKeys);
    },
    /**
     * 工序工单下拉框change事件
     */
    processbillnoSelectChange(value){
      this.resetSendProductDetail();
    },
    /**
     * 生产下拉框change事件
     */
    productionnoSelectChange(value){
      this.resetSendProductDetail();
    },
    //snpn
    snpnSelectChange(value){
      this.resetSendProductDetail();
    },
    //库位下拉change
    inbankIndexSelectChange(){
      this.baseInfoData.inbankBank = '';
      //{inbankIndex:"入库库位1",inbankBankOptions:[{inbankBank:"仓库1",},{inbankBank:"仓库2",}]},
      let map = this.listToMap(this.inbankIndexOptions,'inbankIndex');

      if(map[this.baseInfoData.inbankIndex]){
        this.inbankBankOptions = map[this.baseInfoData.inbankIndex].inbankBankOptions;
      }
    },

    /**
     * 重置送检产品明细
     */
    resetSendProductDetail(){
      this.clearSelectRow();
      let mid = this.baseInfoData.mid;
      let processbillnoValues = this.processbillnoValues;
      let productionnoValues = this.productionnoValues;
      let snpnValues = this.snpnValues;



      let firstData = this.firstInspectionProductsnData;
      let dataByMid = [];
      let usedKey = new Set();
      let resultData = [];

      firstData.forEach(item=>{
        if(mid==item.mid){
          dataByMid.push(item);
        }
      })

      if(processbillnoValues.length>0||productionnoValues.length>0||snpnValues.length>0){

        let dataMap1 = this.listToMap(dataByMid,'processbillno');

        processbillnoValues.forEach(item=>{
          if(dataMap1[item]){

            usedKey.add(dataMap1[item].key);
          }
        })


        let dataMap2 = this.listToMap(dataByMid,'productionno');
        productionnoValues.forEach(item=>{
          if(dataMap2[item]){
            usedKey.add(dataMap2[item].key);
          }
        })

        let dataMap4 = this.listToMap(dataByMid,'snpn');
        snpnValues.forEach(item=>{
          if(dataMap4[item]){
            usedKey.add(dataMap4[item].key);
          }
        })




        let dataMap3 = this.listToMap(dataByMid,'key');
        for(let key of usedKey){
          if(dataMap3[key]){
            resultData.push(dataMap3[key]);
          }
        }

        this.inspectionProductsnData =resultData;
      }else{
        this.inspectionProductsnData =dataByMid;
      }


      this.setTipsState();
    },




    /**
     * 加载工序工单
     */
    initProcessbillnoList(){
      //TODO 2.“工序工单”，根据产品编码自动带出未检的“工序工单”，选择需要送检的工序工单，支持多选，自动带出生产工单


    },

    //提交数据
    submitData(){
      let flag = true;
      let data = this.baseInfoData;

      if(!data.controlsType||data.controlsType===''){
        flag = false;
        this.$message.error("请选择管控方式！");
      }
      if(!data.inbankIndex||data.inbankIndex===''){
        flag = false;
        this.$message.error("请选择入库库位！");
      }
      if(!data.inbankBank||data.inbankBank===''){
        flag = false;
        this.$message.error("请选择入库仓库！");
      }

      let map = this.listToMap(this.inspectionProductsnData,'key');
      let datailList  = [];
      this.selectedRowKeys.forEach(item=>{
        if(map[item]){
          datailList.push(map[item]);
        }
      })

      if(datailList.length>0){
        if(!data.mid||data.mid===''){
          flag = false;
          this.$message.error("请选择产品编码！");
        }
      }

      data.proDetailsList = datailList;



      if(flag){

        data.productionno = this.listToSetThenString(data.proDetailsList,'productionno');
        data.processbillno = this.listToSetThenString(data.proDetailsList,'processbillno');
        data.screeningSn = this.listToSetThenString(data.proDetailsList,'sn');




        putAction('/mes-quality/mesQcIntoWarehouseInspectTask/generateEntity',data).then(res=>{
          if(res.success){
            this.$message.success("操作成功！")
            this.$router.push({path:"/work/auto/MesQcIntoWarehouseInspectTaskList"})
          }else{
            this.$message.warning("操作失败！")
          }
        })
      }

    },


    listToString(list){
      let result = '';
      list.forEach(item=>{
        result+=item;
        result+=',';
      })
      if(list.length>0){
        result = result.substring(0,result.length-1);
      }

      return result;
    },


    listToSetThenString(list,name){
      let result = '';
      let strSet = new Set();

      list.forEach(item=>{
        strSet.add(item[name]);
      })

      for(let str of strSet){
        result+=str+',';
      }
      if(list.length>0){
        result = result.substring(0,result.length-1)
      }
      return result;

    }



  },
};
</script>
<style scoped>
@import "~@assets/less/common.less";
.title {
  padding: 8px 12px;
  background: #fafafa;
}
.title:not(:first-child) {
  margin-top: 25px;
}
.poros-form {
  margin-top: 15px;
}
/deep/ .poros-table-body {
  overflow-x: auto !important;
}
/deep/ .poros-col {
  min-height: 54px;
}
/deep/ .poros-table thead th{
  height:44px;
}
</style>
